<template>
	<view class="cont">
		<view class="cont-navbar">
			<u-navbar :is-back="false" :border-bottom="false">
				<view class="slot-wrap u-col-center u-flex-1 u-flex u-p-l-24 u-p-r-24">
					<view class="u-flex-1">
						<u-search 
							bg-color="#fff"
							border-color="#e2e2e2"
							placeholder="输入关键字" 
							:show-action="true"
							:action-style="{width: '90rpx',fontSize: '28rpx'}"
							focus
							v-model="keyword"
							@search="onSearch"
							@custom="onSearch"></u-search>
					</view>
				</view>
			</u-navbar>
		</view>
		
		<view class="u-flex u-p-24 bg-white">
			<view class="u-p-r-50 u-flex-1 u-text-center" @click="showDate = true">
				购买日期
				<u-icon name="arrow-down" color="#999" size="20" class="u-m-l-8"></u-icon>
			</view>
			<view class="u-p-r-50 u-flex-1 u-text-center" @click="showStatus = true">
				备注状态
				<u-icon name="arrow-down" color="#999" size="20" class="u-m-l-8"></u-icon>
			</view>
		</view>
		
		<view class="cont-list u-p-24">
			<view 
				class="item radius12 bg-white"
				:class="{'u-m-t-24': index > 0}"
				v-for="(item, index) in list" 
				:key="index">
				<view class="item-top u-border-bottom u-p-24 u-light-color">
					购买时间：2021-05-14 21:24
				</view>
				<view class="item-content u-p-24">
					<view class="item-title u-font-30 text-bold u-p-b-14">
						您的满意是我们无限的动力您的满意是我们无限的动力您的满意是我们无限的动力
					</view>
					<view class="u-tips-color">收货地：四川省/成都市</view>
					<view class="u-tips-color u-flex u-col-center u-row-between">
						<view>联系人：<text class="text-success">康先生 / 13900000000</text></view>
						<u-icon name="phone" color="success" size="36" @click="callPhone('15711111111')"></u-icon>
					</view>
				</view>
				<view class="u-text-right u-p-b-24 u-p-t-10 u-p-r-24">
					<u-button 
						type="default" 
						size="mini" 
						shape="circle" 
						class="u-p-l-24 u-p-r-24 u-m-l-20" 
						@click="openPage('/pages/businessTools/remarks')">备注</u-button>
					<u-button 
						type="default" 
						size="mini" 
						shape="circle" 
						class="u-p-l-24 u-p-r-24 u-m-l-20"
						@click="openPage('/pages/businessTools/complain')">申诉</u-button>
					<u-button 
						type="success" 
						size="mini" 
						shape="circle" 
						class="u-p-l-24 u-p-r-24 u-m-l-20"
						@click="setMobile('15222222222')">发消息</u-button>
				</view>
				<view class="item-bottom u-border-top u-p-24 u-tips-color">
					<view>定时回放提醒设置：<text class="text-primary" @click="openPage('/pages/businessTools/playback')">设置</text></view>
					<view class="u-p-t-16">备注：<text class="text-warning">已解决</text></view>
				</view>
			</view>
			
			<!-- 数据为空 -->
			<empty
				:show="nodata"
				marginTop="100"
				text="没有查询到记录~"
				src="https://h5.dhcc.wang/images/O2Oplus/default_goods.png" />
			
			<!-- 加载更多 -->
			<u-loadmore
				v-if="!nodata"
				:status="loadstatus" 
				margin-top="30"
				margin-bottom="20"
				bg-color="#f8f8f8"/>
		</view>
		
		<!-- 发送信息 -->
		<u-modal 
			v-model="showModal" 
			title="" 
			show-cancel-button
			@confirm="sendMsg">
			<view class="slot-content u-text-center u-p-t-10 u-p-b-50 text-bold">
				确定发送短信至 13555555555 吗？
			</view>
		</u-modal>
		
		<!-- 日期 -->
		<u-picker 
			mode="time" 
			v-model="showDate"
			@confirm="confirmDate"></u-picker>
		<u-picker 
			mode="selector" 
			v-model="showStatus" 
			:range="selectorStatus"
			range-key="label"
			@confirm="confirmStatus"></u-picker>
		
		<u-back-top 
			:scroll-top="scrollTop" 
			:icon-style="{fontSize: '36rpx',color: infoColorError}"></u-back-top>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLogin: false,
			
			// 导航栏---------------
			scrollTop: 0,
			background: {
				background: '',
			},
			
			keyword: '',
			showDate: false,
			showStatus: false,
			currentDate: '',
			currentStatus: '',
			selectorStatus: this.ENUM.SELECTORSTATUS,
			
			showModal: false,
			mobile: '',
			
			nodata: false,
			page: 1,
			pageSize: 10,
			loadstatus: 'loading', // 加载前值为loadmore，加载中为loading，没有数据为nomore
			list: []
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onLoad(query) {
		this.background.background = this.infoColorError
	
		this.init()
	},
	onReady() {
		// 是否登录
		uni.$on(this.ENUM.EVENT_LOGIN_KEY, () => {
			this.getStorage()
		})
	},
	onPullDownRefresh() {
		this.init()
	},
	onUnload() {
		uni.$off(this.ENUM.EVENT_LOGIN_KEY)
	},
	onReachBottom() {
		if (this.loadstatus == 'nomore') return
		this.getList()
	},
	methods: {
		init() {
			this.getStorage()
			this.getList(true)
		},
		
		getStorage() {
			// uni.hideShareMenu()
		},
		
		getList(init = false) {
			this.loadstatus = 'loading'
			if (init) {
				this.page = 1
				this.nodata = false
			}
			// this.$api.getDemo({
			// 	page: this.page,
			// 	pageSize: this.pageSize
			// }, init).then(res => {
			// 	// 11111
			// })
			setTimeout(() => {
				if (init) this.list = []
				let list = [
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					}
				]
				// this.list.length && list.length < this.pageSize // loadstatus条件
				this.loadstatus = (this.list.length === 30) ? 'nomore' : 'loadmore'
				this.list = [...this.list, ...list]
				
				this.page++
				this.nodata = this.list.length === 0
				uni.stopPullDownRefresh()
			}, 1000)
		},
		
		onSearch() {
		},
		
		confirmDate(data) {
			this.currentDate = `${data.year}-${data.month}-${data.day}`
		},
		
		confirmStatus(data) {
			this.currentStatus = data[0]
		},
		
		callPhone(phoneNumber) {
			uni.makePhoneCall({
			    phoneNumber
			})
		},
		
		setMobile(mobile) {
			this.mobile = mobile
			this.showModal = true
		},
		
		sendMsg() {
			// 发送信息
		},
		
		openPage(url) {
			this.$common.openPage(url)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .u-wrap {
	background-color: transparent;
}

.cont {
	overflow-x: hidden;
	min-height: 100vh;
	padding-bottom: calc(var(--window-bottom) + 10px);
}
.item {
	&-content {
		line-height: 48rpx;
	}
	.u-btn {
		width: 130rpx;
	}
}
</style>
